import { h } from "vue"
import { getGeometricStyle } from './utils'
export default function render (list, isEdit, options){
  if(isEdit){
    return renderComponentWrapList(list, options)
  }
  else {
    return renderComponentList(list)
  }
  
}
/**
 * 渲染动态组件
 * @param {Object} item 
 * @param {Function} callback
 * @returns 
 */
export function renderDynaComponent(item, callback = ()=> {}){
  const {
    tag,
    props,
    element,
    id,
    class: className
  } = item
  switch(tag){
    case "c-text":
      return (
        <c-text props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-button":
      return (
        <c-button props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-echarts":
      return (
        <c-echarts props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-table":
      return (
        <c-table props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-date-picker":
      return (
        <c-date-picker props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-range-picker":
      return (
        <c-range-picker props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-select":
      return (
        <c-select props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-web":
      return (
        <c-web props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-box":
      return (
        <c-box props={props} element={element} draggable={false} id={id} class={className} />
      )
    case "c-tabs":
      return (
        <c-tabs props={props} element={element} draggable={false} id={id} class={className} >
          {
            (props.list || []).map(tab => {
              return (
                <a-tab-pane key={tab.label} tab={tab.label}>
                  {callback(tab.children)}
                </a-tab-pane>
                
              )
            })
          }
        </c-tabs>
      )
    case "c-custom":
      return (
        <c-custom props={props} element={element} draggable={false} id={id} class={className} >
        </c-custom>
      )
  }
}

/**
 * 渲染有包装的组件列表
 * @param {*} list 
 * @param {*} options 
 * @returns 
 */
export function renderComponentWrapList(list, options){
  const {
    selectedComponent,
    handleComponentMouseDown,
  } = options
  return (
    (list || []).map(item => {
      const data = item.key === selectedComponent.key ? {
        ...selectedComponent,
        props: selectedComponent.props,
        element: selectedComponent,
        draggable:false,
        id: selectedComponent.key,
        class: selectedComponent.class,
        tag: item.tag
      } 
      :
      {
        ...item,
        props: item.props,
        element:item,
        draggable:false,
        id: item.key,
        class:item.class,
        tag: item.tag
      }
      return (
        
        <Wrap
          componentClick={(...args)=> {handleComponentMouseDown(...args)}}
          defaultStyle={item.style}
          key={item.key}
          element={item}
          style={getGeometricStyle(selectedComponent.key === item.key ? selectedComponent.style : item.style)}
          isSelected={selectedComponent.key === item.key}>
          {
            renderDynaComponent(data, renderComponentWrapList)
          }
          
        </Wrap>
      )
    })
    
  )
  
}

/**
 * 渲染无包装的组件列表
 * @param {*} list 
 * @returns 
 */
export function renderComponentList(list){
  return (
    (list || []).map(item => (
        <div
          defaultStyle={item.style}
          key={item.key}
          element={item}
          style={getGeometricStyle(item.style)}>
          {
            renderDynaComponent(item, renderComponentList)
          }
          
        </div>
    ))
    
  )
  
}



